<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="10" md="11">
        <v-textarea
          clearable
          clear-icon="mdi-close-circle"
          label="请输入base64字符"
          v-model="pdfData"
          rows="8"
        ></v-textarea>
      </v-col>
    </v-row>
  </v-container>

  <div class="container">
    <iframe
      :src="pdfPreviewUrl"
      width="90%"
      height="700vh"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfData: "",
    };
  },
  computed: {
    pdfPreviewUrl() {
      try {
        var blob = this.base64ToBlob(this.pdfData, "application/pdf");
        var url = URL.createObjectURL(blob);
      } catch (e) {
        url = "";
      }
      console.log(url);
      return url;
    },
  },
  methods: {
    stringToBlob(str, type) {
      const blob = new Blob([str], { type });
      return blob;
    },
    base64ToBlob(base64, type) {
      try {
        var binaryString = window.atob(base64);
        const len = binaryString.length;
        const bytes = new Uint8Array(len);

        for (let i = 0; i < len; i++) {
          bytes[i] = binaryString.charCodeAt(i);
        }

        return new Blob([bytes], { type });
      } catch {
        return this.stringToBlob(base64, type);
      }
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding-bottom: 5%;
  padding-top: 1%;
}
.containertext {
  width: 70%; /* 设置宽度为 70% */
}
</style>
